<template>
    <div class="TabBar">
        <tab-bar-item
                v-for="(item, index) in source"
                :key="index"
                :item="item"
                @click="tabBarDidSelect(index)"
        />
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import TabBarItem from "./TabBarItem.vue";
@Component({
    name: 'TabBar',
    components: {TabBarItem}
})
export default class extends Vue {
    private get source(): any {
        return [
            { title: '首页', icon: require('../assets/tab-bar/icon_shouye_g.png'), selectIcon: require('../assets/tab-bar/icon_shouye_b.png'), src: '/home', selected: this.tabBarItemDidSelected('/home') },
            { title: 'C2C', icon: require('../assets/tab-bar/icon_c2c_g.png'), selectIcon: require('../assets/tab-bar/icon_c2c_b.png'), src: '/c2c', selected: this.tabBarItemDidSelected('/c2c') },
            { title: '节点', icon: require('../assets/tab-bar/icon_jiedian_g.png'), selectIcon: require('../assets/tab-bar/icon_jiedian_b.png'), src: '/node', selected: this.tabBarItemDidSelected('/node') },
            { title: '我的', icon: require('../assets/tab-bar/icon_my_g.png'), selectIcon: require('../assets/tab-bar/icon_my_b.png'), src: '/user-center', selected: this.tabBarItemDidSelected('/user-center') }
        ]
    }
    private tabBarDidSelect(index: number): void {
        this.$router.replace(this.source[index].src);
    }
    private tabBarItemDidSelected(src: string): boolean {
        return src === this.$route.path
    }
}
</script>

<style scoped lang="less">
.TabBar {
    position: fixed;
    z-index: 999;
    width: 7.5rem;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    bottom: 0;
    height: 1.08rem;
    background-color: white;
    &::after {
        content: " ";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 1px;
        background-image: linear-gradient(
                0deg,
                transparent 61%,
                rgba(0, 0, 0, .5) 100%
        );
    }
}
</style>
